<template>
  <div>

    <h2>版本发布管理</h2>

    <el-row>
      <el-col :span="24">
        <div class="tool-box">
          <el-button type="primary" icon="el-icon-circle-plus-outline" size="small" @click="handle()">新增</el-button>
        </div>
      </el-col>
    </el-row>

    <el-table
      :data="tableData"
      v-loading = "loading"
      style="font-size: 10px"
      max-height="450"
    >
<!--      <el-table-column-->
<!--        prop="id"-->
<!--        label="序号"-->
<!--        width="60">-->
<!--      </el-table-column>-->
      <el-table-column
        prop="version"
        label="版本号"
        width="60">
      </el-table-column>
      <el-table-column
        prop="name"
        label="版本名称"
        width="110">
      </el-table-column>
      <el-table-column
        prop="link"
        label="应用下载地址"
        v-if=false
        width="110">
      </el-table-column>
      <el-table-column
        prop="type"
        label="设备类型"
        width="70">
      </el-table-column>
      <el-table-column
        prop="forceUpdate"
        label="强制更新"
        width="70">
      </el-table-column>


      <el-table-column
        prop="isSilent"
        label="静默更新"
        width="70">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="150">
      </el-table-column>
      <el-table-column
      prop="createUser"
      label="创建人"
      width="90">
      </el-table-column>
      <el-table-column
        prop="updateTime"
        label="更新时间"
        width="150">
      </el-table-column>
      <el-table-column
        prop="updateUser"
        label="更新人"
        width="90">
      </el-table-column>
      <el-table-column
        prop="createDept"
        label="创建部门"
        v-if=false
        width="90">
      </el-table-column>
      <el-table-column
        prop="status"
        label="是否封禁"
        width="90">
      </el-table-column>
      <el-table-column
        prop="isDeleted"
        label="是否删除"
        v-if=false
        width="90">
      </el-table-column>
      <el-table-column
        prop="appStatus"
        label="业务状态"
        v-if=false
        width="90">
      </el-table-column>
      <el-table-column
        prop="createOrg"
        label="创建机构"
        v-if=false
        width="90">
      </el-table-column>
      <el-table-column
        prop="createUserBusinessId"
        label="创建人业务id"
        v-if=false
        width="90">
      </el-table-column>
      <el-table-column label="操作" >
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleView(scope.$index, scope.row)">查看</el-button>
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<!--          <el-button-->
<!--            size="mini"-->
<!--            disabled-->
<!--            plain-->
<!--            @click="handleDelete(scope.$index, scope.row)">删除</el-button>-->
        </template>
      </el-table-column>
    </el-table>



        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.currentPage"
          :page-sizes="[5, 10, 20]"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total">
        </el-pagination>

    <el-dialog :title="dialogTitle" width="600px" :visible.sync="formVisible" :append-to-body="true" @close="resetForm('form')">
      <el-form ref="form" :model="form" label-width="180px"  >

        <el-form-item label="版本号" prop="version" :rules="[{required: true, message:'请输入版本号'  ,trigger: 'blur'},{ min: 5, max: 5,message: '长度为5个字符', trigger: 'blur' },{ pattern:/^[A-Za-z0-9]+$/, message: '只能输入数字、字母', trigger: 'blur'}]">
          <el-input type="textarea" v-model="form.version" style="width: 30%" rows="1" autocomplete="off" v-bind:disabled="disabledInput"></el-input>
        </el-form-item>
        <el-form-item label="版本名称" prop="name" :rules="[{ required: true, message:'请输入版本名称'  ,trigger: 'blur'}, { pattern:/^[a-zA-Z0-9\u4e00-\u9fa5()（）]+$/, message: '只能输入汉字、数字、字母、括号', trigger: 'blur'}]">
          <el-input type="textarea" v-model="form.name" style="width: 30%" rows="1" autocomplete="off" v-bind:disabled="disabledInput"></el-input>
        </el-form-item>
        <el-form-item label="应用下载地址" prop="link" v-if="updateShow">
          <el-input type="textarea" v-model="form.link" style="width: 60%" rows="1" autocomplete="off" v-bind:disabled=true ></el-input>
        </el-form-item>

        <el-form-item label="设备类型" prop="type" :rules="[{required: true, message:'请选择设备类型'  ,trigger: 'blur'}]">
          <el-radio-group v-model="form.type" v-bind:disabled="disabledInput">
            <el-radio label="Android" name="type">Android</el-radio>
            <el-radio label="iOS" name="type">iOS</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="强制更新" prop="forceUpdate" :rules="[{required: true, message:'请选择是否强制更新'  ,trigger: 'blur'}]">
          <el-radio-group v-model="form.forceUpdate" v-bind:disabled="disabledInput">
            <el-radio :label="1" name="type">是</el-radio>
            <el-radio :label="0" name="type">否</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="静默更新" prop="isSilent" :rules="[{required: true, message:'请选择是否静默更新'  ,trigger: 'blur'}]">
          <el-radio-group v-model="form.isSilent" v-bind:disabled="disabledInput">
            <el-radio :label="1">是
            </el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>

<!--        <el-form-item label="是否删除" prop="isDeleted" :rules="[{required: true, message:'请选择是否删除'  ,trigger: 'blur'}]">-->
<!--          <el-radio-group v-model="form.isDeleted">-->
<!--            <el-radio :label="1">是-->
<!--            </el-radio>-->
<!--            <el-radio :label="0">否</el-radio>-->
<!--          </el-radio-group>-->
<!--        </el-form-item>-->

<!--        <el-form-item label="状态" prop="status" :rules="[{required: true, message:'请选择状态'  ,trigger: 'blur'}]">-->
<!--          <el-radio-group v-model="form.status" v-bind:disabled="disabledInput">-->
<!--            <el-radio :label="1">是</el-radio>-->
<!--            <el-radio :label="0">否</el-radio>-->
<!--          </el-radio-group>-->
<!--        </el-form-item>-->

<!--        <el-form-item label="创建人id" prop="createUser" :rules="[{required: true, message:'请输入创建人id'  ,trigger: 'blur'}]">-->
<!--          <el-input type="textarea" v-model="form.createUser" style="width: 30%" rows="1" autocomplete="off" v-bind:disabled="disabledInput"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="创建部门" prop="createDept" :rules="[{required: true, message:'请输入部门id'  ,trigger: 'blur'}]">-->
<!--          <el-input type="textarea" v-model="form.createDept" style="width: 30%" rows="1" autocomplete="off" v-bind:disabled="disabledInput"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="创建时间" prop="createTime" :rules="[{required: true, message:'请输入创建时间'  ,trigger: 'blur'}]">-->
<!--          <el-input type="textarea" v-model="form.createTime" style="width: 30%" rows="2" autocomplete="off"></el-input>-->
<!--          <el-date-picker-->
<!--            v-model="form.createTime"-->
<!--            type="datetime"-->
<!--            placeholder="选择日期时间"-->
<!--            value-format="yyyy-MM-dd HH:mm:ss"-->
<!--            v-bind:disabled="disabledInput"-->
<!--          >-->
<!--          </el-date-picker>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="更新人" prop="updateUser" v-if="updateShow">-->
<!--          <el-input type="textarea" v-model="form.updateUser" style="width: 30%" rows="1" autocomplete="off" v-bind:disabled="disabledInput" ></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="更新时间" prop="updateTime" v-if="updateShow">-->
<!--          <el-date-picker-->
<!--            v-model="form.updateTime"-->
<!--            type="datetime"-->
<!--            placeholder="选择日期时间"-->
<!--            value-format="yyyy-MM-dd HH:mm:ss"-->
<!--            v-bind:disabled="disabledInput"-->
<!--          >-->
<!--          </el-date-picker>-->
<!--        </el-form-item>-->

<!--        <el-form-item label="创建机构" prop="createOrg" :rules="[{required: true, message:'请输入创建机构'  ,trigger: 'blur'}]">-->
<!--          <el-input type="textarea" v-model="form.createOrg" style="width: 60%" rows="1" autocomplete="off" v-bind:disabled="disabledInput"></el-input>-->
<!--        </el-form-item>-->

<!--        <el-form-item label="创建人业务id" prop="createUserBusinessId" :rules="[{required: true, message:'请输入业务人员id'  ,trigger: 'blur'}]">-->
<!--          <el-input type="textarea" v-model="form.createUserBusinessId" style="width: 30%" rows="1" autocomplete="off" v-bind:disabled="disabledInput"></el-input>-->
<!--        </el-form-item>-->

        <el-form-item label="app状态" prop="isSilent" :rules="[{required: true, message:'请选择app状态'  ,trigger: 'blur'}]">
          <el-radio-group v-model="form.appStatus" v-bind:disabled="disabledInput">
            <el-radio :label="1">封禁
            </el-radio>
            <el-radio :label="0">未封禁</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="描述" prop="description" :rules="[{required: true, message:'请输入描述内容'  ,trigger: 'blur'}]">
          <el-input type="textarea" v-model="form.description" style="width: 60%" rows="5" autocomplete="off" v-bind:disabled="disabledInput"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button @click="formVisible = false">取 消</el-button>
          <el-button v-if="!viewMode" type="primary" @click="submitBlog(form)">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import {getList, getDetail, add, remove,update} from "@/api/version/version";

export default {
  data() {
    return {
      totalCount:1,
      page: {
        pageSize: 10,
        currentPage: 1,
        pageSizes:[10,15,20,30],
        total: 0
      },
      form: {},
      disabledInput:false,
      tableData: [],
      loading: false,
      formVisible: false,
      dialogTitle: '',
      dialogVisible: false,
      viewMode: false,
      updateShow: false
    }
  },
  created(){
    this.onLoad();
    this.xx='';
  },

  methods: {
    handleSizeChange(val) {
      // 改变每页显示的条数
      this.page.PageSize=val
      // 点击每页显示的条数时，显示第一页
      this.onLoad(val,1)
    },

    handleCurrentChange(val){
      this.page.currentPage=val;
      this.onLoad();
    },

    submitBlog() {
      // 表单验证
      console.log("yes");
      if (this.form.updateTime==null){
        console.log(this.form.createTime)
        this.form.updateTime=this.form.createTime;
        this.form.updateUser=this.form.createUser;
      }
      if (this.dialogTitle=="发布版本配置"){
        this.$refs.form.validate((valid) => {
            if (valid) {

        add(this.form).then(res => {
          if (res.data.success) {
            this.onLoad();
            this.formVisible = false;
            this.form=[];
            this.$message({
              type: 'success',
              message: '操作成功！'
            })
          } else {
            console.log("no");
            this.$message({
              type: 'error',
              message: res.data.msg
            })
          }
        })}})
      }else if (this.dialogTitle=="修改版本历史"){
        this.viewMode = false;
        console.log("1")
        this.$refs.form.validate((valid) => {
            if (valid) {
        update(this.form).then(res =>{
          console.log("2")
          if (res.data.success) {
            this.onLoad();
            this.formVisible = false;
            this.$message({
              type: 'success',
              message: '操作成功！'
            })
          }else{
            console.log("no")
          }
        })}})
      }
    },

    handleView(index, row) {
      this.disabledInput=true;
      this.dialogTitle = '查看详情';
      this.updateShow=true;
      this.formVisible = true;
      this.viewMode = true;
      getDetail(row.id).then(res => {
        if (res.data.success) {
          //console.log("777")
          this.form = res.data.data;
          console.log(res.data.data)
        }
      });

      console.log("view");
      console.log(index);
      console.log(row);
    },

    handle() {
      this.dialogTitle='发布版本配置';
      this.disabledInput=false;
      this.updateShow=false;
      this.disabled=false;
      this.formVisible = true;
      this.viewMode = false;
      console.log("add")
    },

    handleEdit( index,row) {
      this.dialogTitle = '修改版本历史';
      this.disabledInput=false;
      this.updateShow=true;
      this.formVisible = true;
      this.viewMode = false;
      getDetail(row.id).then(res => {
        if (res.data.success) {
          this.form = res.data.data;
          console.log(res.data.data)
        }
      });
      console.log("edit");
      console.log(index);
      console.log(row);
    },

    resetForm() {
      this.$refs.form.resetFields()
      this.form={};
    },

      handleDelete(index, row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          remove(row.id).then(res => {
            if (res.data.success) {
              this.onLoad();
              this.$message({
                type: 'success',
                message: '操作成功！'
              })
            } else {
              this.$message({
                type: 'error',
                message: res.data.msg
              })
            }
          });
        });
      console.log("delete");
      console.log(index);
      console.log(row);
    },


    onLoad(page, params = {}) {
      this.loading = true;
      const {currentPage,pageSize}=this.page;
      getList(currentPage, pageSize, Object.assign(params, this.query)).then(res => {
        console.log('result',res);
        const data = res.data.data;
        this.page.total = data.total;
        this.tableData = data.records;
        this.loading = false;
      });
    },
  }
}


</script>

<style scoped>

</style>

